/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React from 'react';
import { connect } from 'umi';
import type { ConnectState } from '@/models/connect';
import { Form, Input, Button } from 'antd';
import type { InnStorageRecordIndex } from '../types/InnStorageRecord';
import CommonTable from './_common/CommonTable';
import { InnStroageRecordColumn } from './utils';
import CommonResetButton from './_common/CommonResetButton';
const FormItem = Form.Item;

interface FormValuesType {
  phone: string;
  expressNo: string;
}

const tablesList = [
  {
    title: '基本信息',
    key: 'baseinfo',
  },
  {
    title: '操作记录',
    key: 'recordList',
  },
];

const InnStorageRecord = (props: InnStorageRecordIndex) => {
  const { screenSize, dispatch, innStorageRecordList = {}, tableLoading } = props;
  const [form] = Form.useForm();
  const onFinish = (values: FormValuesType) => {
    dispatch({
      type: 'customerSearch/inboundAndOutboundRecords',
      payload: {
        ...values,
      },
    });
  };
  const onReset = () => {
    form.resetFields();
    dispatch({
      type: 'customerSearch/save',
      payload: {
        innStorageRecordList: {
          baseinfo: [],
          recordList: [],
        },
      },
    });
  };

  return (
    <>
      <Form
        form={form}
        onFinish={onFinish}
        layout={screenSize ? 'vertical' : 'inline'}
        style={{ marginBottom: 40 }}
      >
        <FormItem
          label={'驿站账号'}
          name='phone'
          // rules={[{ required: true, message: '请输入手机号' }]}
        >
          <Input allowClear style={{ width: 250 }} placeholder={'请输入手机号'} />
        </FormItem>
        <FormItem
          label={'运单号'}
          name='expressNo'
          // rules={[{ required: true, message: '请输入运单号' }]}
        >
          <Input allowClear style={{ width: 250 }} placeholder={'请输入运单号'} />
        </FormItem>
        <FormItem>
          <Button type='primary' htmlType='submit' loading={tableLoading}>
            查询
          </Button>
          <CommonResetButton onReset={onReset} />
        </FormItem>
      </Form>
      {tablesList.map((item) => (
        <CommonTable
          key={item.key}
          title={item.title}
          columns={InnStroageRecordColumn(item.key)}
          datasource={innStorageRecordList[item.key] || [{ id: '1' }]}
          loading={tableLoading}
        />
      ))}
    </>
  );
};

export default connect(({ customerSearch, loading }: ConnectState) => ({
  innStorageRecordList: customerSearch.innStorageRecordList || {},
  tableLoading: loading.effects['customerSearch/inboundAndOutboundRecords'],
}))(React.memo(InnStorageRecord));
